{{ header }}{{ column_left }}
<div id="content">
    {# 标题 保存 返回 #}
    <div class="page-header">
        <div class="container-fluid">
            <div class="pull-right">
                <button type="submit" form="form-module" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
                <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
            <h1>{{ edit_heading_title }}</h1>
            <ul class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
                {% endfor %}
            </ul>
        </div>
    </div>

    {# 表单 #}
    <div class="container-fluid">
        {# 表单错误提示 #}
        {% if error_warning %}
            {#{% if not error_warning %} <- 取否的写法 #}
            <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        {% endif %}

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
            </div>
            <div class="panel-body">
                <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-module" class="form-horizontal">

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="input-name">{{ edit_name }}</label>
                        <div class="col-sm-10">
                            <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control"/>
                            {% if error_name %}
                                <div class="text-danger">{{ error_name }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">{{ edit_open }}</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                {% if status %}
                                    <input type="radio" name="status" value="1" checked="checked"/>
                                    {{ text_yes }}
                                {% else %}
                                    <input type="radio" name="status" value="1"/>
                                    {{ text_yes }}
                                {% endif %}
                            </label> <label class="radio-inline">
                                {% if not status %}
                                    <input type="radio" name="status" value="0" checked="checked"/>
                                    {{ text_no }}
                                {% else %}
                                    <input type="radio" name="status" value="0"/>
                                    {{ text_no }}
                                {% endif %}
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="input-banner">{{ select_banner }}</label>
                        <div class="col-sm-10">
                            <select name="banner_id" id="input-banner" class="form-control">
                                {% for banner in banners %}
                                    {% if banner.banner_id == banner_id %}
                                        <option value="{{ banner.banner_id }}" selected="selected">{{ banner.name }}</option>
                                    {% else %}
                                        <option value="{{ banner.banner_id }}">{{ banner.name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    {# 单图上传 a #}
                    {#<div class="form-group">#}
                        {#<label class="col-sm-2 control-label" for="input-image-a">{{ image_a }}</label>#}
                        {#<div class="col-sm-10">#}
                            {#<a href="" id="thumb-image-a" data-toggle="image" class="img-thumbnail">#}
                                {#<img src="{{ helper.image_resize(thumb_a) }}" alt="" title="" data-placeholder="{{ helper.image_resize() }}"/>#}
                            {#</a>#}
                            {#<input type="hidden" name="thumb_a" value="{{ thumb_a }}" id="input-image-a"/>#}
                        {#</div>#}
                    {#</div>#}

                    {# 单图上传 b #}
                    {#<div class="form-group">#}
                        {#<label class="col-sm-2 control-label" for="input-image-b">{{ image_b }}</label>#}
                        {#<div class="col-sm-10">#}
                            {#<a href="" id="thumb-image-b" data-toggle="image" class="img-thumbnail">#}
                                {#<img src="{{ helper.image_resize(thumb_b) }}" alt="" title="" data-placeholder="{{ helper.image_resize() }}"/>#}
                            {#</a>#}
                            {#<input type="hidden" name="thumb_b" value="{{ thumb_b }}" id="input-image-b"/>#}
                        {#</div>#}
                    {#</div>#}

                    {# icon 列表上传 #}
                    <ul class="nav nav-tabs" id="language">
                        {% for language in languages %}
                            <li>
                                <a href="#language{{ language.language_id }}" data-toggle="tab">
                                    <img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}"/> {{ language.name }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                    <div class="tab-content">
                        {% set image_row = 0 %}
                        {% for language in languages %}
                            {# for 循环中注意 id / name 不要重复 #}
                            <div class="tab-pane" id="language{{ language.language_id }}">
                                <table id="images{{ language.language_id }}" class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <td class="text-left">{{ edit_title }}</td>
                                        <td class="text-left">{{ edit_url }}</td>
                                        <td class="text-left">
                                               <span data-toggle="tooltip" title="{{ help_image }}">
                                                {{ edit_image }}
                                                </span>
                                        </td>
                                        <td></td>
                                    </tr>
                                    </thead>
                                    <tbody class="tbody-sortable">
                                    {% if locale_icons_map[language.language_id] %}
                                        {% for icon_image in locale_icons_map[language.language_id] %}
                                            {# for 循环中注意 id / name 不要重复 #}
                                            <tr id="image-row{{ image_row }}">
                                                <td class="text-left"><input type="text" name="locale_icons_map[{{ language.language_id }}][{{ image_row }}][title]" value="{{ icon_image.title }}" placeholder="{{ entry_title }}" class="form-control"/>
                                                    {% if error_icon_image[language.language_id][image_row] %}
                                                        <div class="text-danger">{{ error_icon_image[language.language_id][image_row] }}</div>
                                                    {% endif %}</td>
                                                <td class="text-left" style=""><input readonly="" type="text" name="locale_icons_map[{{ language.language_id }}][{{ image_row }}][link]" value="{{ icon_image.link }}" placeholder="{{ entry_link }}" class="form-control app-icon-link"/></td>
                                                <td class="text-center">
                                                    <a href="" id="thumb-image{{ image_row }}" data-toggle="image" class="img-thumbnail">
                                                        <img src="{{ helper.image_resize(icon_image.image) }}" alt="" title="" data-placeholder="{{ helper.image_resize() }}"/>
                                                    </a>
                                                    <input type="hidden" name="locale_icons_map[{{ language.language_id }}][{{ image_row }}][image]"
                                                           value="{{ icon_image.image }}" id="input-image{{ image_row }}"/>
                                                </td>
                                                <td class="text-left">
                                                    <button type="button" onclick="removeIcon(this);" title="{{ button_remove }}" class="btn btn-danger">
                                                        <i class="fa fa-minus-circle"></i>
                                                    </button>
                                                    <button type="button" title="{{ edit_sort }}" class="sortable-handle btn btn-info">
                                                        <i class="fa fa-bars"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            {% set image_row = image_row + 1 %}
                                        {% endfor %}
                                    {% endif %}
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="text-left">
                                            <button type="button" onclick="addImage('{{ language.language_id }}');"
                                                    data-toggle="tooltip" title="{{ button_banner_add }}" class="btn btn-primary">
                                                <i class="fa fa-plus-circle"></i></button>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        {% endfor %}
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
{# 动态新增 #}
<script type="text/javascript"><!--
  // 默认显示第一个语言的表格
  $('#language a:first').tab('show');

  var image_row = {{ image_row }};

  function addImage(language_id) {
    html = '<tr id="image-row' + image_row + '">';
    html += '  <td class="text-left"><input type="text" name="locale_icons_map[' + language_id + '][' + image_row + '][title]" value="" placeholder="标题" class="form-control" /></td>';
    html += '  <td class="text-left" style=""><input readonly="" type="text" name="locale_icons_map[' + language_id + '][' + image_row + '][link]" value="" placeholder="链接" class="form-control app-icon-link" /></td>';
    html += '  <td class="text-center"><a href="" id="thumb-image' + image_row + '" data-toggle="image" class="img-thumbnail"><img src="{{ helper.image_resize() }}" alt="" title="" data-placeholder="{{ helper.image_resize() }}" /></a><input type="hidden" name="locale_icons_map[' + language_id + '][' + image_row + '][image]" value="" id="input-image' + image_row + '" /></td>';
    html += '  <td class="text-left"><button type="button" onclick="removeIcon(this)" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button> <button type="button" title="排序" class="sortable-handle btn btn-info"><i class="fa fa-bars"></i></button></td>';
    html += '</tr>';

    $('#images' + language_id + ' tbody').append(html);

    image_row++;
  }

  function removeIcon(btn) {
    $(btn).closest('tr').remove(); // parent 只匹配上一级父元素，closest 匹配祖先元素
  }
//--></script>

{# use jquery ui sortable #}
{#<script src="/admin/view/javascript/jquery/jquery-ui/jquery-ui.min.js"></script>#}
<style>
    .sortable-handle {cursor: ns-resize}
    /* 拖拽占位元素，保持高度 */
    .ui-sortable-placeholder { height: 128px}
</style>
<script>
!function initSortable() {
  /**
   * sortable 在拖拽 tr 时会使用 position absolute,
   * tr 中的 td 宽度会无法正确计算，造成缩小的问题，需要计算并固定拖动的 tr 的宽度
   *
   * @link http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/
   */
  function fixTableRowWidth(e, sort_elem) {
    sort_elem.children().each(function() {
      $(this).width($(this).width());
    });
    return sort_elem;
  }

  /**
   * 拖拽排序
   *
   * @link http://api.jqueryui.com/sortable/ - options doc
   */
  $('.tbody-sortable').sortable({
    axis: 'y',
    cancel: '', // 默认值为 "input,textarea,button,select,option" ，这些元素是不能做为拖拽标定物的，所以需要取消
    revert: true, // 松开过渡动画,
    opacity: 0.8,
    tolerance: "pointer", // cursor 触及其他元素就换位,
    containment: "parent", // 限制范围
    handle: ".sortable-handle",
    helper: fixTableRowWidth,
    forcePlaceholderSize: true,
  });
}();
</script>

<link rel="stylesheet" href="/catalog/view/javascript/libs/cascade/cascade.css">
<script type="text/javascript" src="/catalog/view/javascript/libs/cascade/cascade.js"></script>
<script type="text/javascript" src="/catalog/view/javascript/libs/qs.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(document).on('focus', 'input.app-icon-link', function (event) {
            $(event.currentTarget).cascadeSelector({
                local: '{{ code }}',
                api:{
                    categories: '/admin/index.php?route=extension/module/panx_app_icon_link/categories&user_token={{ user_token }}',
                    module: '/admin/index.php?route=extension/extension/module/iconLinkSelection&user_token={{ user_token }}',
                    products: '/admin/index.php?route=catalog/product/autocomplete&user_token={{ user_token }}',
                }
            });
        })
    })
</script>


{{ footer }}
